<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xl="0"></el-col>
      <el-col :span="12" :xl="24">
        <el-col :span="16" class="login_box">
          <el-row>
            <el-col :span="24">
              <p>Hello</p>
            </el-col>
            <el-col :span="24">
              <p>欢迎来到后台</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form ref="loginForms" :model="userData" :rule="rules" label-width="auto">
                <el-form-item prop="username">
                  <el-input v-model="userData.username" :prefix-icon="User" clearable></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input v-model="userData.password" type="password" :prefix-icon="Lock" show-password></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button :loading="loading" type="primary" @click="login">登录</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { User, Lock } from "@element-plus/icons-vue";
import { reactive } from "vue";
import { useUserStore } from "@/store/modules/user.ts";
import { ElNotification } from "element-plus";
import type { FormRules, FormInstance } from "element-plus";
import { useRouter } from "vue-router";
import { ref } from "vue";
// 收集表单数据
const userData = reactive({ username: "admin", password: "111111" });
let loading = ref(false); //按钮加载

const validateUsername = (rule, value, callback) => {
  console.log(rule);
  if (/^[0-9a-zA-Z]{5,15}$/.test(value)) callback();
  else callback(new Error("账号只能是5-15个数个数字、字母"));
};
const validatePassword = (rule, value, callback) => {
  console.log(rule);
  if (/^\w{5,15}$/.test(value)) callback();
  else callback(new Error("密码只能是5-15个数个数字、字母和下划线"));
};

const rules = reactive<FormRules>({
  username: [{ validator: validateUsername, trigger: "change" }],
  password: [{ validator: validatePassword, trigger: "change" }],
});
const store = useUserStore();
const $router = useRouter();
const loginForms = ref<FormInstance>();

const login = () => {
  console.log(loginForms.value);
  loginForms.value.validate(async valid => {
    if (valid) {
      loading.value = true;
      try {
        const result = await store.reqLogin(userData);
        $router.push("/");
        loading.value = false;
        ElNotification({
          message: result,
          type: "success",
          title: "上午好",
        });
      } catch (err) {
        loading.value = false;
        ElNotification({
          message: err,
          type: "error",
        });
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.login_container {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/background.jpg") no-repeat;
  background-size: cover;
  .login_box {
    background: url("@/assets/images/login_form.png") no-repeat;
    background-size: cover;
    margin-top: 35%;
    p {
      color: white;
      size: 1.6rem;
    }
    .el-row {
      padding: 7%;
      .el-button {
        width: 100%;
      }
    }
  }
}
</style>
